<template>
  <div class="wrap">
    <div class="banner">
      <div class="banner-main">
        <span class="banner-main__title">铝工业物联网云迁移解决方案</span>
        <span class="banner-main__subtitle">依托铝工业互联网平台IaaS及PaaS服务，联合生态伙伴共同打造云迁移解决方案。</span>
        <span class="banner-main__btn">服务咨询</span>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案描述</h1>
        <h6 class="model-desc">model description</h6>
        <div class="card">
          <span class="description">
            针对不同的环境需求浪潮提供不同的云迁移工具，实现在不中断业务服务的情况下的业务系统迁移。<br />               
            铝工业互联云迁移可以实现物理机-虚拟机，虚拟机-虚拟机，物理机-云主机，虚拟机-云主机等的迁移能力，实现业主生产环境的整体迁移。<br />  
            源服务器系统与目标系统操作系统相同一致的业务迁移，可以直接通过浪潮云迁移工具软件实现业务迁移，对应目标系统与源系统的操作系统不一致的情况，可以通过迁移一体机系统实现，系统环境切换，完成系统迁移。<br />
          </span>
          <div align="center"><img src="@/assets/flow1.png" width="670px" /></div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案业务架构</h1>
        <h6 class="model-desc">Scheme business architecture</h6>
        <Streamer>
          <p style="line-height: 28px; font-size: 14px;">
            系统按照数据接入、分析预警、告警展示、态势感知功能过程进行设计其中态势感知包括网络入侵态势感知、异常流量态势感知、僵木蠕传播态势感知、高级恶意威胁检测、网站安全态势感知、系统漏洞态势感知六部分。数据接入源包括入侵检测/防护系统、流量分析系统、网站安全监测/防护系统、流量分析系统、漏洞扫描系统、未知威胁检测系统。
            <br />
            流量接入后首先经过入侵检测/防护系统处理后，Netflow数据转发到流量分析系统处理后经过底层大数据平台分析，到达态势感知平台；未识别的恶意文件转发到未知威胁检测系统，处理后经过底层大数据平台分析，到达态势感知平台。网站安全检测系统、漏洞扫描系统结果数据接入经脆弱性分析模块到达态势感知平台，由态势感知平台统一展示，整体流程如下图所示：
          </p>
        </Streamer>
        <img style="margin: 20px auto 0px; display: block;" src="@/assets/mind1.png" width="515px" height="227px" />
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案技术架构</h1>
        <h6 class="model-desc">Scheme Technology Architecture</h6>
        <div class="card">
          <div align="center"><img src="@/assets/flow2.png" width="862px" /></div><br />
          <span class="description">
            铝工业互联云迁移服务基于以下技术来实现业务系统的整机快速迁移：<br />
            1、支持基于快照备份点的整机备份<br />
            无需关注业务系统细节将整机包括操作系统、业务系统软件、数据和配置文件备份下来；<br />
            2、支持CDP连续数据保护<br />
            以秒为单位持续备份原业务系统的整机数据备份，可实现将业务系统的任一状态整机迁移至目标云主机上。<br />
            3、支持在线服务系统快速迁移<br />
            实现X86物理服务器、虚拟化和云环境之间在线快速迁移，只需预先在目标系统上构建相同版本的操作系统，即可快速将源主机整机重建迁移，业务迁移时:首先镜像源主机系统文件，后续可以将增量复制到目标机，停止源主机后选择启动迁移重启迁移目标服务器即可将完成迁移。<br />
            4、支持X2X异构迁移<br />
            实现X86物理服务器、虚拟化和云环境之间的应用系统异构（X2X）整机恢复重建迁移，异构环境下业务恢复重建时:<br />
            先获取目标机的硬件配置并在一体机内部建立与目标机相同的虚拟硬件环境, 与备份OS进行适配；产生兼容目标机的OS环境推送至目标机重构OS、应用软件和业务数据。<br />  
          </span>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案优势</h1>
        <h6 class="model-desc">Scheme advantage</h6>
        <div class="row" v-for="(item, index) in list" :key="index">
          <div class="row-box" v-for="(sub, i) in item" :key="i">
            <div class="row-icon">
              <img :src="sub.icon" />
            </div>
            <h2 style="line-height: 28px">{{sub.title}}</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">客户案例</h1>
        <h6 class="model-desc">model description</h6>
        <div class="card">
          <div class="card-box">
            <b style="font-weight:bold">1、	华龙网</b><br />
            云间业务负载迁移服务帮助华龙网将重要的业务系统从原来的360公共云平台迁移至重庆安全云平台。
          </div>
          <div class="card-box">
            <b style="font-weight:bold">2、 中冶集团</b><br />
            帮助中冶集团将门户网站、部分二级单位的OA、邮件等业务系统迁移至中冶云平台。
          </div>
          <div class="card-box">
            <b style="font-weight:bold">3、 华讯方舟</b><br />
            助力华讯方舟的数据中心,以及合作的电信运营商,完成大量的业务系统迁移。
          </div>  
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Streamer from '@/components/Streamer/Streamer'
export default {
  components: {
    Streamer
  },
  data () {
    return {
      list: [
        [
          { icon: require('@/assets/icon_01.png'), title: '同一系统，可以多次迁移；' },
          { icon: require('@/assets/icon_02.png'), title: '迁移前，可方便的进行迁移演练，验证迁移计划可行性；' }
        ],
        [
          { icon: require('@/assets/icon_03.png'), title: '对现有系统几乎没有什么要求，也不会有什么影响；' },
          { icon: require('@/assets/icon_04.png'), title: '99%的业务迁移成功率，为用户提供可靠的迁移保障。' }
        ],
        [
          { icon: require('@/assets/icon_05.png'), title: '数据迁移过程，业务连续性不会中断，只有切换时的秒断；' },
          { icon: require('@/assets/icon_06.png'), title: '即使新系统仍然在运行，也能保证数据一致性，迁移后的新系统与源系统一样；' }
        ],
        [
          { icon: require('@/assets/icon_07.png'), title: '独有的PCI虚拟技术，驱动智能匹配，轻松解决老系统到新平台的硬件兼容性问题；' },
          { icon: require('@/assets/icon_08.png'), title: '不论源业务系统是Windows还是Linux，统一的图形化操作界面，精简的操作步骤，只需简单点击鼠标，几步操作就可以完成迁移；' }
        ],
        [
          { icon: require('@/assets/icon_09.png'), title: '与应用系统的具体业务无关，从系统底层打包数据，所以无需了解业务系统的具体细节，只需了解一些从应用系统外部很容易了解的信息，如操作系统版本，分布于几个磁盘，数据量有多大等就可以实施迁移；' },
        ]
      ]
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/style/variables.less';

.wrap {
  background-color: rgb(246, 246, 246);
}

.banner {
  width: 100%;
  height: 400px;
  background: url('~@/assets/bg1.jpg') no-repeat center 100%;
  .banner-main {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 0;
    .banner-main__title {
      font-size: 42px;
      color: #ffffff;
    }
    .banner-main__subtitle {
      font-size: 14px;
      color: #ffffff;
      margin: 20px 0;
    }
    .banner-main__btn {
      cursor: pointer;
      color: #ffffff;
      transition: all .4s;
      display: block;
      width: 138px;
      height: 39px;
      line-height: 39px;
      background: rgba(0,220,243,0.5);
      border: 1px solid #00dcf3;
      color: #ffffff;
      font-size: 14px;
      text-align: center;
      &:hover {
        background: rgba(0,220,243,0.8);
      }
    }
  }
}

.model {
  padding: 60px 0;
  .model-main {
    width: 1200px;
    margin: 0 auto;
    .card {
      .card-box {
        margin-bottom: 15px;
        line-height: 28px;
      }
    }
    .row {
      margin-right: -8px;
      margin-right: -8px;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      .row-box {
        display: flex;
        flex: 1;
        align-items: center;
        background-color: #2a3f74;
        color: #698acd;
        border: 1px #405b9f solid;
        padding: 20px;
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
        .row-icon {
          width: 46px;
          height: 46px;
          margin-right: 20px;
        }
      }
      .row-card {
        background: #2a3f74;
        color: #698acd;
        padding: 15px;
        padding-left: 95px;
        line-height: 28px;
        margin-bottom: 15px;
        border: 1px #405b9f solid;
      }
    }
  }
  .model-title {
    color: #403d56;
    font-size: 30px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
    text-align: center;
  }
  .model-desc {
    color: #bababa;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 50px 0;
    padding: 0;
    text-align: center;
    .card{
      .description{
      line-height: 28px;
      }
    }
  }
  &:nth-child(odd) {
    background: rgb(32, 50, 96);
    .model-title {
      color: rgb(97, 145, 221);
    }
    .model-desc {
      color: rgb(70, 106, 170);
    }
  }
}

.card {
  @box_shadow();
  width: 100%;
  padding: 30px;
  background: #fff;
}
.description{
  line-height: 28px;
}

</style>
